<template>
	<div>
		<Checkbox v-model="keepAlive" style="margin:20px">缓存</Checkbox>
		<Checkbox v-model="animated" style="margin:20px">动画</Checkbox>
		面板数量: <NumberInput v-model="count" :min="1" :max="3"/>
		<br/>
		<Radio v-for="i in count" :key="i" v-model="cur" :val="'myKey'+i" style="margin:20px">面板{{i}}</Radio>
		<TabPanels
			v-model="cur"
			enter-class="animate__animated animate__slideInRight"
			leave-class="animate__animated animate__slideOutLeft"
			prev-enter-class="animate__animated animate__slideInLeft"
			prev-leave-class="animate__animated animate__slideOutRight"
			:keep-alive="keepAlive"
			:animated="animated"
			style="margin:20px;height:200px">
			<TabPanel v-for="i in count" :key="i" :name="'myKey'+i">
				<component :is="'Test'+i"></component>
			</TabPanel>
		</TabPanels>
	</div>
</template>

<script>
import TabPanels from '@/components/pc/tab-panels';
import TabPanel from '@/components/pc/tab-panel';
import Radio from '@/components/pc/radio';
import Checkbox from '@/components/pc/checkbox';
import NumberInput from '@/components/pc/number-input';
import Test1 from './Test1';
import Test2 from './Test2';
import Test3 from './Test3';
export default {
	name:'index',
	components:{
		TabPanels,
		TabPanel,
		Radio,
		Checkbox,
		NumberInput,
		Test1,
		Test2,
		Test3,
	},
	data(){
		return {
			cur:'myKey1',
			count:3,
			keepAlive:true,
			animated:true,
		};
	},
	methods:{
	}
};
</script>

<style lang="scss">

</style>
